[v-cloak]{
    display: none;
}
$barColor:#5c9bb7;

*,ul,li,div,img,a{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
 body{
    	font:15px/1.3 'Open Sans', sans-serif;
    	color: #5e5b64;
    	text-align:center;
    }
   a, a:visited {
    	outline:none;
    	color:#389dc1;
        -webkit-tap-highlight-color: rgba(255,255,255,0);
        text-decoration-line: none;
    }

    a:hover{
    	text-decoration:none;
    }
    .bar{
        padding: 15px;
        line-height: 1;
        background-color: $barColor;
        text-align: right;
        a{
            background: #4987a1 center center no-repeat;
            height: 32px;
            width: 32px;
            display: inline-block;
            margin-right: 5px;
        }
        a.grid{
            background-image:url()

        }
        a.list{
            background-image: url()
        }
        a.active{
            background-color: #c14694;
        }
    }
    .content{
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }
    .listGroup{
        box-sizing: border-box;
        li{
                border-bottom: 1px solid #ddd;
                padding: 10px;
                overflow: hidden;
                box-sizing: border-box;
        }
    }
    .listGroupCon{
        display: -webkit-box;
        display: box;
        .listGroupImgWrap{
            width: 120px;
            height: 120px;
            .listGroupImg{
                width: 120px;
                height: 120px;
                float: left;
                opacity: 1;
                transition: opacity 0.5s ease-in;
            }
            
        }
        .listGroupText{
                -webkit-box-flex: 1;
                margin-left: 10px;
                p{
                        font-weight: bold;
                        color: #6e7a7f;
                        font-size: 15px;
                        text-align: left;
                        line-height: 20px;
                        height: 40px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        display: box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        word-break: break-word;
                }
            }
    }
    .gridGroup{
        li{
            width: 50%;
            float: left;
            zoom: 1;
        }
        li:after{
            content: "020"; 
            display: block; 
            height: 0; 
            clear: both; 
            visibility: hidden;
        }
    }
    .gridGroupImg{
        width: 100%;
        display: block;
        object-fit: cover;
    }
    .gridGroup{
        li{
            padding: 2px;
            overflow: hidden;
            box-sizing: border-box;
        }
    }